<template>
  <div>
    <my-header></my-header>
    <div class="breadcrumb">
      <router-link to="/shoppingindex">结婚</router-link>
      >
      <router-link to="/shoppingindex">结婚用品</router-link>
      >
      <router-link to="/shoppingindex">婚房布置</router-link>
      >
      <router-link to="/shoppingindex">婚房套装</router-link>
    </div>
    <div class="content clearfix">
      <div class="content-left fl">
        <div class="ctl-header clearfix" style="overflow: visible">
          <div class="tag">
            <em>分类</em>
            <a>婚房套装</a>
          </div>
          <dd class="leihz2">
            <em>最新发布</em>
            <img
              src="http://qnm.hunliji.com/o_1akn0e36a1aar1svuad7dgr4of7.png"
              style="margin-top: -1px"
              alt="婚礼纪"
            />
            <div>
              <span class="gotoUrl" target_url="/hunpin/list_545?order=1"
                >默认排序</span
              >
              <span class="gotoUrl" target_url="/hunpin/list_545?order=2"
                >价格最高</span
              >
              <span class="gotoUrl" target_url="/hunpin/list_545?order=3"
                >价格最低</span
              >
              <span class="gotoUrl" target_url="/hunpin/list_545?order=4"
                >最多喜欢</span
              >
            </div>
          </dd>
        </div>
        <div class="ctl-hplist clearfix">
         <dl v-for="(item,i) in commodity.slice(0,20)" :key="i">
					<dt>
						<router-link rel="nofollow" to="/shoppinglist" target="_blank">
							<img :src="item.img"
								:alt="item.title">
						</router-link>
					</dt>
					<dd>
						<p>
							<a rel="nofollow" href="" target="_blank">{{item.title}}</a>
						</p>
						<p class="price clearfix">
							<i class="fl">
								¥
								<em>{{item.price}}</em>
							</i>
							<span class="fr">
								<!-- ::before -->
								165
							</span>
							<!-- ::before -->
						</p>
					</dd>
				</dl>
 
          <!-- ::after -->
        </div>
        <div class="pages">
				 <ul>
					 <li>
						  <a class="current">1</a>
						  <a href="/hunpin/?p=2">2</a>
						  <a href="/hunpin/?p=3">3</a>
						  <a href="/hunpin/?p=4">4</a>
						  <a href="/hunpin/?p=5">5</a>
						  <a href="/hunpin/?p=6">6</a>
						  <a href="/hunpin/?p=7">7</a>
						  <a href="/hunpin/?p=8">8</a>
						  <a href="/hunpin/?p=9">9</a>
						  <a href="/hunpin/?p=10">10</a>
						   ...
						<a href="/hunpin/?p=33">33</a>
					</li>
				</ul>
				 <span class="prev">
					 <a rel="nofollow" href="/hunpin/?p=2">下一页 &gt;</a>
					</span>
				</div>
      </div>
      <div class="content-right fl">
        <h4>热卖婚品</h4>
        <div class="ctr-hotlist clearfix">
          <!-- ::after -->
        </div>
      </div>
      <!-- ::after -->
    </div>
    <my-footer></my-footer>
  </div>
</template>
<script>
export default {
  data(){
    return{
      commodity:[], //所有商品集合[商品1,商品2,...]
    }
  },
  methods:{
    // 加载所有商品
		loadCommodity(){
			this.axios.get(`/shopping/index`).then(res=>{
				this.commodity=res.data;
			})
		},
  },
  mounted(){
    // 加载所有商品
		this.loadCommodity();
		document.title="婚品采购"

  }
}
</script>
<style scoped>
.breadcrumb {
  width: 1200px;
  margin: 20px auto 0 auto;
  font-size: 14px;
}

.breadcrumb a {
  color: #666;
}

.breadcrumb a:hover {
  color: #ff5c5c;
}
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-weight: normal;
}
body a {
  text-decoration: none;
  cursor: pointer;
}
.content {
  padding: 30px 0 0px 0;
  width: 1200px;
  margin: 0 auto;
}
.clearfix {
  overflow: hidden;
}
.content-left {
  width: 1000px;
}
.fl {
  float: left;
}
element.style {
  overflow: visible;
}
.ctl-header {
  width: 968px;
  margin-bottom: 20px;
}
.clearfix {
  overflow: hidden;
}
.ctl-header .tag em {
  float: left;
  display: inline-block;
  line-height: 32px;
}
em,
i,
cite {
  font-style: normal;
}
span,
b,
i,
em {
  display: inline-block;
  font-style: normal;
}
.ctl-header .tag a {
  line-height: 30px;
  padding: 0 10px;
  border: 1px solid #e7e7e7;
  color: #ff5c5c;
  float: left;
  border-radius: 8px;
  display: inline-block;
}
body a {
  text-decoration: none;
  cursor: pointer;
}
.leihz2 {
  width: 90px;
  height: 24px;
  float: right;
  margin-right: 15px;
  border: 1px solid #e7e7e7;
  line-height: 24px;
  background: #fff;
  margin-top: 3px;
  text-align: center;
  position: relative;
  z-index: 99;
}
dl,
dt,
dd,
ul,
ol,
li,
form,
span,
a,
input,
p {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
element.style {
  margin-top: -1px;
}
.ctl-hplist img {
  width: 220px;
  border: none;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  font-size: 100%;
  font: inherit;
  box-sizing: content-box;
}
.leihz2 div {
  width: 90px;
  line-height: 24px;
  border: 1px solid #e7e7e7;
  background: #fff;
  padding: 0;
  display: none;
}
.leihz2 div span {
  width: 100%;
  text-align: left;
  text-indent: 10px;
  color: #666;
}
.gotoUrl {
  cursor: pointer;
}
.clearfix:after {
  display: block;
  content: "\20";
  clear: both;
  height: 0;
  visibility: hidden;
}
.clearfix {
  overflow: hidden;
}
.ctl-hplist dl {
  width: 220px;
  margin: 0px 30px 30px 0px;
  float: left;
}
.ctl-hplist dl dd {
  padding: 10px;
  border: 1px solid #e8e8e8;
  border-top: 0;
}
.ctl-hplist dl dd p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ctl-hplist dl dd p a {
  font-size: 14px;
  color: #333;
}
body a {
  color: #666;
  text-decoration: none;
  cursor: pointer;
}
.ctl-hplist dl dd p.price {
  height: 24px;
  line-height: 24px;
  padding-top: 5px;
}
.ctl-hplist dl dd p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ctl-hplist dl dd p.price i {
  color: #ff5c5c;
}
.fl {
  float: left;
}
.ctl-hplist dl dd p.price i em {
  font-size: 18px;
}
.ctl-hplist dl dd p.price span {
  color: #999;
  font-size: 12px;
}
.fr {
  float: right;
}
.ctl-hplist dl dd p.price span:before {
  width: 12px;
  height: 12px;
  content: "";
  background: url(http://qnm.hunliji.com/o_1ae6le65l1sidplq1nqtsrksab7.png)
    no-repeat 0px -1px;
  margin-right: 5px;
  margin-top: 6px;
  float: left;
}
.pages {
	padding-top: 20px;
	text-align: center;
	width: 1200px;
	margin: 0 auto;
	clear: both;
	/* padding-bottom: 80px; */
}
div, ul,li {
    margin: 0;
    padding: 0;
    font-weight: normal;
}
.pages ul{
	width: auto;
	display: inline-block;
}
ul{
	list-style: none;
}
ul,li,span,a{
	margin: 0;padding: 0;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
ul, li {
    list-style: none outside none;
}
.pages ul a.current {
	background: #ff5c5c;
	color: #fff;
	border: 1px solid #ff5c5c;
	z-index: 1;
}
.pages ul a:first-child{
	margin-left: 0;
}
.pages ul a{
	line-height: 34px;
	min-width: 34px;
	display: inline-block;
	position: relative;
}
body a{
	color: #666;
	text-decoration: none;
	cursor: pointer;
}
.pages ul a {
    line-height: 34px;
    min-width: 34px;
    display: inline-block;
    margin-left: -1px;
    border: 1px solid #e7e7e7;
    position: relative;
}
.pages span {
    width: 78px;
    height: 34px;
    border: 1px solid #e7e7e7;
    line-height: 34px;
    color: #666;
}
.content-right {
  width: 200px;
}
.fl {
  float: left;
}
.content-right h4 {
  font-size: 20px;
  color: #333;
  border-left: 3px solid #ff5c5c;
  padding-left: 10px;
  line-height: 20px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: normal;
}
</style>